<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
    <title>管理入口-用户信息列表</title>
    
    <%@ include file="../common.jsp" %>
	<script type="text/javascript" src="${path }/static/vender/jquery/jquery.pagination.js"></script>

  </head>

  <body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="main" name="active"/>
	</jsp:include>
  	
    <div class="container-fluid">
      <div class="row">
      	<div class="col-sm-3 col-md-2 sidebar">
			<%@ include file="left_navbar.jsp" %>
		</div>
		
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
          <h1 class="page-header">用户信息预览 <button type="button" id="addUserBtn" class="btn btn-info pull-right">&nbsp;添加用户&nbsp;</button></h1>

          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>用户名</th>
                  <th>角色</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
             	<c:forEach var="user" varStatus="idx" items="${users }">
             		<tr>
	                  <td>${idx.index+1 }</td>
	                  <td>${user.userName }</td>
	                  <td>${user.role }</td>
	                  <td><fmt:formatDate value="${user.createTime }" pattern="yyyy-MM-dd hh:mm:ss" /></td>
	                  <td>
	                  	<a href="${path }/user/doDel?id=${user.id }" onclick="return confirm('确定删除吗？该所有信息将清空！')" class="btn btn-primary">删除</a> 
	                  	<a href="javascript:;" name="setWalkerGroup" data="${user.id }" class="btn btn-primary">设置健步组</a> 
	                  </td>
					</tr>
             	</c:forEach>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    
    	
	<div id="addPanel" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	        <span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">添加用户</h4>
	      </div>
	      <div class="modal-body">
	        <form id="addWalkerForm">
              <div class="form-group">
                <label for="recipient-name" class="control-label">用户名:</label>
                <input type="text" class="form-control" check-type="required" id="userName">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">密码:</label>
                <input type="text" class="form-control" check-type="required" id="password">
              </div>
              <div class="form-group">
                <label for="message-text" class="control-label">角色:</label>
                <select id="roleId" class="form-control">
                   	<option value="0" selected  >普通用户</option>
                   	<option value="1"  >健步组长</option>
                   	<option value="999"  >管理员</option>
                 </select>
              </div>
              <div class="form-group">
                <div id="msgDiv" class="alert alert-success" style="display:none;" role="alert"></div>
              </div>
            </form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button id="saveRectBtn" type="button" class="btn btn-primary">保存</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div id="setWalkerGroupPanel" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	        <span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">指定用户拥有的健步组</h4>
	      </div>
	      <div class="modal-body">
              <div class="form-group">
				<c:forEach var="walkerGroup" items="${walkerGroups }">
             		<label class="checkbox-inline">
					  <input type="checkbox" value="${walkerGroup.id }"> ${walkerGroup.groupName }
					</label>
             	</c:forEach>
              </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button id="saveWalkerGroupRectBtn" type="button" class="btn btn-primary">保存</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<form action="list" id="queryForm" method="post" style="display: none"></form>
	
	<jsp:include page="${pagePath }/paginator.jsp">
		<jsp:param name="form" value="#queryForm" />
	</jsp:include>
	
	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>

	<script type="text/javascript">
		var currentUserId;
		
		$("#addPanel").validation({reqmark:false,icon:false});
		
		$("#addUserBtn").click(function(){
			$("#addPanel").modal({backdrop: 'static', keyboard: false});
		});
		$("[name='setWalkerGroup']").click(function(){
			$("#setWalkerGroupPanel").modal({backdrop: 'static', keyboard: false});
			$("#setWalkerGroupPanel input[type='checkbox']").prop("checked", false); 
			currentUserId = $(this).attr("data");
			$.post("getWalkerGroupsByUserId",{
				userId: currentUserId
			}, function(data){
				if(!data)
					return ;
				for(var i in data){
					var groupId = data[i].id;
					$("#setWalkerGroupPanel input[value='"+groupId+"']").prop("checked", true);
				}
			});
		});
		
		$("#saveRectBtn").click(function(){
			if($("#addPanel").valid()==false)
				return false;
			$.post("${path }/user/doSave" , {
				userName : $("#userName").val(),
				password : $("#password").val(),
				role : $("#roleId").val()
			}, function(data,status){
				$("#msgDiv").show().html(data.msg);
				if(data && data.status==true) {
					$("#msgDiv").attr("class", "alert alert-success");
					$("#userName").val('');
					$("#password").val('');
				}else{
					$("#msgDiv").attr("class", "alert alert-warning");
				}
			});
		});
		
		$("#saveWalkerGroupRectBtn").click(function(){
			var groupIds = "";
			$("#setWalkerGroupPanel input[type='checkbox']:checked").each(function(i,e){
				groupIds += e.value + ",";
			});
			groupIds = groupIds.substr(0, groupIds.length -1);
			
			$.post("${path }/user/saveUserWalkerGroup" , {
				userId : currentUserId, 
				groupIds : groupIds 
			}, function(data,status){
				$.messager.popup(data.msg);
			});
		});
	</script>
</body></html>